<template>
    <div id="p_task" class="p_task">        
        <group>           
            <div v-if="nones.length==0" style="text-align:center;" ><img src="/static/z39h5/img/none.png" width="200" /></div>     
            <swipeout>
                <swipeout-item @on-open="actionOpen(item, index)" v-for="(item, index) in nones" :key="index" ref="action" >
                    <div slot="right-menu">
                        <swipeout-button @click.native="goTask(item,index)" type="warn">查看</swipeout-button>
                        <swipeout-button @click.native="onDelClick(item,index)" type="default">取消</swipeout-button>
                    </div>
                    <div slot="left-menu">
                        <swipeout-button type="primary">{{item.state!='done'?'完成':'取消完成'}}</swipeout-button>
                    </div>
                    <div slot="content" class="vux-1px-t">
                        <cell @click.native="onEdit(item,index)" :title="item.title" :inline-desc="item.desc">
                            <img slot="icon" :src="showIcons(item)">
                        </cell>
                    </div>
                </swipeout-item>
            </swipeout>
        </group>
        <!--<x-button style="width:50px;height:50px;position:fixed;right:10px;bottom:62px;border-radius: 25px;z-index:2;" @click.native="onTaskAdd" type="primary" ><span style="font-size:22px;padding-right: 8px;" class="icon iconfont icon-tianjia2"></span></x-button>
        <task-add :show="showTaskAdd" :ext="taskAddExt" v-on:toVisible="taskAddVis"></task-add>--> 
    </div>
</template>
<script>
import moment from "moment";
import _ from "../../../static/jslib/underscore-min.js";
import Vue from 'vue';

import api from '../../api';
import {
    mapState,
    mapActions
} from 'vuex'

import { taskAndTag } from "../mixin";
import TaskAdd from "../TaskAdd";

import {
    Toast,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Group,Cell,Tab,TabItem,
    Box,XInput,XTextarea,Flexbox, FlexboxItem,Datetime,Scroller,ButtonTab,ButtonTabItem
} from 'vux'

export default {
    components: {
        Toast,Swipeout,SwipeoutItem,SwipeoutButton,XButton,Group,Cell,Tab,TabItem,TaskAdd,
        Box,XInput,XTextarea,Flexbox, FlexboxItem,Datetime,Scroller,ButtonTab,ButtonTabItem
    },    
    mixins: [taskAndTag],    
    computed: {
        nones: function() {
            return this.taskAll.filter(function (task) {return task.state == "weekend" } );
        },
        ...mapState({
            uid: state => state.vux.uid,
            taskAll: state => state.z39.taskAll,
            tagDic: state => state.z39.tagDic,
        })
    },
    watch: {        
        "uid":function(){
            this.initPage();
        },
    },
    activated () {
    },
    created() {
        this.initPage();
			this.$store.commit({ type: "z39/addTaskExt", value: {state:"weekend",tags:{weekend:""}} });
    },
    mounted: function() {
        
    },
    methods: {
        initPage(){
			if( this.uid == 0 )return ;
            this.tasksGet({key:"weekend",usesocket:true}) ;
        },
        onEdit(item,index){
            this.taskCurr = item ;
            let _this = this ;
            let time = moment().format("H");
            time = parseInt(time) ;
            let temp ;
            if( time >= 12 ){
                temp = this.showMonth|| moment().add(1, 'days').format("YYYY-MM-DD");
            }else{
                temp = this.showMonth|| moment().format("YYYY-MM-DD");
            }
            this.$vux.datetime.show({
                cancelText: '取消',
                confirmText: '确定',
                format: 'YYYY-MM-DD',
                startDate: moment().format("YYYY-MM-DD") ,
                value: this.showMonth||temp,
                onConfirm (val) {
                  this.showMonth =  val ;
                  _this.doTagSet(_this.taskCurr,"due",val).then(tdata=>{
                    _this.$vux.toast.show({ text: "设置成功", type: "success" })
                })
                },
                onShow () {
                  console.log('plugin show')
                },
                onHide () {
                  console.log('plugin hide')
                }
              })
        },
        onTaskDue(item,index){
            
        },
        goTask(item,index){ // 进入任务详情
            this.$router.push(`/taskDetail/${item.id}`) ;
        },
        onDelClick(item,index){
            this.doTaskEdit(item,"cancelled",moment().format("YYYY-MM-DD HH:mm"));
        },
        onEditTask(item,index,state){
            switch(state){
                case "done":

                    break;
                case "undo":

                    break;
                default:
                    console.error("onEditTask:",state);
            }
        },
        actionOpen(item,index,option){            
            let dir = "" , target , arrIndex = index ;
            target = this.$refs.action[index] ;
                dir = target.direction ;
            if( dir == "left"){
                if( item.state == "done"){
                    this.doTaskEdit(item,"");
                }else{
                    this.doTaskEdit(item,"done",moment().format("YYYY-MM-DD HH:mm"))
                }
                setTimeout(() => {
                    target.close();
                }, 200);                
            }
        },
        clickAdd(){
            this.weekEdit=true ;
            this.resetInput(); 
        },
        resetInput(){
            this.taskTitle = "";
            this.taskDesc = "" ;
        },
        getData: function() {
            
        },
        showIcons(item){
            var name = 'logo' ;
            // done due due1 need none safe sort sort1 start summary task used            
            if( item.state == "" ){
                if( item.tags.due != undefined ){
                    name = item.tags.due.length>10?'due1':'due' ;
                }else if( item.tags.need != undefined ){
                    name = 'need' ;
                }else{
                    name = 'logo' ;
                }            
            }else if( item.state == "started" ){
                name = 'start' ;
            }else if( item.state == "toggle" ){
                name = 'pause' ;
            }else if( item.state == "cancelled" ){
                name = 'cancel' ;
            }else if( item.state == "done" ){
                if(item.tags.summary !=undefined){
                    name = 'summary' ;
                // }else if(item.tags.sort !=undefined){
                //     name = 'sort' ;
                }else{
                    name='done' ;
                }
            }else{
                name = 'logo' ;
            }
            let img = `/static/z39h5/img/${name}.png` ;
            return img ;
        },
        onTaskAdd(){
            this.taskAddExt = {state:"weekend",tags:{weekend:""}} ;
			this.$store.commit({ type: "z39/addTaskExt", value: {state:"weekend",tags:{weekend:""}} });
            this.showTaskAdd = true ;
        },
        taskAddVis(val){
            this.showTaskAdd = val ;
        },
        ...mapActions([
            
        ])
    },
    data() {
        return {
            showMonth:'',
            taskCurr: null ,
            weekEdit:false ,
            taskTitle:"",
            taskDesc:"",
            showTaskAdd:false,
            taskAddExt:{},
        }
    }
}

</script>
<style scoped>

.day-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.day-item-selected {
  border: 1px solid green;
}

</style>
<style>
#p_task .weui-search-bar:before {
    height: 0;
    border-top: 0;
}
/*#p_task .vux-tab .vux-tab-item{
    background: #fff;
}*/
#p_task .day  .vux-tab-selected {
    background: #eee;
    border-radius: 4px;
}
</style>
